<template>
	<div class="uploadImg">
		<h2>测试：上传到远程服务器(线上提供的接口只能一张一张上传，调多次接口)</h2>
		<el-upload
			multiple
			action="https://img.oioweb.cn/api.php"
			list-type="picture-card"
			:file-list="fileList"
			:on-success="uploadImg"
			:data='files'
			:on-preview="handlePictureCardPreview"
			:on-remove="handleRemove">
			<i class="el-icon-plus"></i>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
		<hr><br><br>
			<!-- :on-success="uploadImg" -->
			<!-- :headers='headers' -->
		<h2>测试：上传到本地文件夹(使用upload组件多图上传时会一张一张上传，调多次接口)</h2>
		<el-upload
			action="http://localhost:2008/api/image/uploadTest"
			multiple
			list-type="picture-card"
			:file-list="fileList"
			:on-preview="handlePictureCardPreview"
			:on-remove="handleRemove">
			<i class="el-icon-plus"></i>
		</el-upload>
		<hr><br><br>
		<h2>测试：使用input标签上传到本地文件夹</h2>
		<input type="file" name="file" id='uploadTest' multiple ref='file' @change='uploadTest'>
		<div class="putImg"></div>
		<div class="uploadBox el-upload--picture-card el-upload" @click='$refs.file.click()'>
			<i class="el-icon-plus"></i>
		</div>
	</div>
</template>
<script type="text/javascript">
	import {uploadImg,getTestImg,uploadOnline,deleteTestImg,uploadTest} from '@/api/image'
	export default{
		name:'uploadImg',
		data(){
			return{
				dialogImageUrl: '',
				dialogVisible: false,
				files:{
					type:"huluxia"
				}, 
				fileList:[],
				headers:{
					Authorization:'Bearer '+sessionStorage.getItem('token')
				}
			}
		},
		methods: {
			async uploadTest(){
				let list=this.$refs.file.files;
				if(list.length>3){
					return this.info('一次最多选择三张图片~~~','w');
				}
				let configs = {
					headers:{'Content-Type':'multipart/form-data'}
				};
				let formData=new FormData();
				for(let i of list){
	            	formData.append('file',i);
				}
				// formData.append('type','yq');
				// let result=await uploadOnline(formData,configs);
				let{imgpath:imgPath}=await uploadTest(formData,configs);
				this.info('图片上传成功~~~');
				console.log(imgPath);
			},
			async handleRemove(file, fileList) {
				let list=fileList.map(val=>{
					return val.url;
				})
				let {success}=await deleteTestImg(list);
				if(success) this.info('图片删除成功~~~');
				else this.info('图片删除失败~~~','e');

			},
			handlePictureCardPreview(file) {
				console.log(file.id);
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			async uploadImg(res, file){
				let {imgpath:[c]}=res;
				console.log(c);
				let data=await uploadImg(sessionStorage.getItem('id'),c);
				// let code=await  res.code;
				// if(code==1){
				// 	if(file){
				// 		file.name=res.imgurl;
				// 		file.url=res.imgurl;
				// 	}	
				// 	let data=await uploadImg(sessionStorage.getItem('id'),res.imgurl);
				// 	if(data.success){
				// 		this.info('s', '图片上传成功~~~');
				// 	}
				// }
				// else{
				// 	this.info('e', '图片上传失败~~~');
				// }
				
			},
			async uploadImg2(res, file){
				console.log(res);
			},
			async fetch(){
				let result=await getTestImg();
				this.fileList=result;
			}
		},
		created(){
			this.fetch();
		}
	}
</script>
<style type="text/css">
	#uploadTest{
		display: none;
	}
</style>